import * as React from "react";
import { Row, Col, Card } from "antd";
import IconFont from "../../../../../assets/ICON";
export interface OverviewProps {
  dataSouce: any;
}

export interface OverviewState {
  eleData: {
    dayCompared: number | null;
    dayLast: number | null;
    dayThis: number | null;
    monthCompared: number | null;
    monthLast: number | null;
    monthThis: number | null;
    yearCompared: number | null;
    yearLast: number | null;
    yearThis: number | null;
  };
  waterData: {
    dayCompared: number | null;
    dayLast: number | null;
    dayThis: number | null;
    monthCompared: number | null;
    monthLast: number | null;
    monthThis: number | null;
    yearCompared: number | null;
    yearLast: number | null;
    yearThis: number | null;
  };
  standardData: {
    dayCompared: number | null;
    dayLast: number | null;
    dayThis: number | null;
    monthCompared: number | null;
    monthLast: number | null;
    monthThis: number | null;
    yearCompared: number | null;
    yearLast: number | null;
    yearThis: number | null;
  };
}

class Overview extends React.Component<OverviewProps, OverviewState> {
  state = {
    eleData: {
      dayCompared: null,
      dayLast: null,
      dayThis: null,
      monthCompared: null,
      monthLast: null,
      monthThis: null,
      yearCompared: null,
      yearLast: null,
      yearThis: null,
    },
    waterData: {
      dayCompared: null,
      dayLast: null,
      dayThis: null,
      monthCompared: null,
      monthLast: null,
      monthThis: null,
      yearCompared: null,
      yearLast: null,
      yearThis: null,
    },
    standardData: {
      dayCompared: null,
      dayLast: null,
      dayThis: null,
      monthCompared: null,
      monthLast: null,
      monthThis: null,
      yearCompared: null,
      yearLast: null,
      yearThis: null,
    },
  };
  render() {
    let { eleData, waterData, standardData } = this.state;
    let { getPlusOrMinus, getDifference } = this;
    return (
      <>
        <div className="Overview">
          <Row style={{ marginLeft: -12, marginRight: -12, rowGap: 0 }}>
            <Col
              xs={24}
              sm={24}
              md={24}
              lg={24}
              xl={24}
              xxl={8}
              style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
            >
              <Card bordered={false} className="OvBox OvBox1">
                <div className="box_title">
                  电能耗情况&nbsp;&nbsp;|&nbsp;&nbsp;kW·h
                </div>
                <div className="box_body">
                  <Row style={{ marginLeft: -6, marginRight: -6, rowGap: 0 }}>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">日用量</div>
                        <div className="top_vd">
                          {eleData.dayThis ? eleData.dayThis : 0}
                        </div>
                        <div className="top_bd">
                          较上日
                          <span
                            className={getPlusOrMinus(
                              eleData.dayThis,
                              eleData.dayLast
                            )}
                          >
                            {getDifference(eleData.dayThis, eleData.dayLast)
                              ? getDifference(eleData.dayThis, eleData.dayLast)
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">月用量</div>
                        <div className="top_vd">
                          {eleData.monthThis ? eleData.monthThis : 0}
                        </div>
                        <div className="top_bd">
                          较上月
                          <span
                            className={getPlusOrMinus(
                              eleData.monthThis,
                              eleData.monthLast
                            )}
                          >
                            {getDifference(eleData.monthThis, eleData.monthLast)
                              ? getDifference(
                                  eleData.monthThis,
                                  eleData.monthLast
                                )
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">年用量</div>
                        <div className="top_vd">
                          {eleData.yearThis ? eleData.yearThis : 0}
                        </div>
                        <div className="top_bd">
                          较去年
                          <span
                            className={getPlusOrMinus(
                              eleData.yearThis,
                              eleData.yearLast
                            )}
                          >
                            {getDifference(eleData.yearThis, eleData.yearLast)
                              ? getDifference(
                                  eleData.yearThis,
                                  eleData.yearLast
                                )
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">环比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(eleData.dayThis, eleData.dayLast)
                          }
                        >
                          <IconFont
                            type={
                              "icon_zonglan_" +
                              getPlusOrMinus(eleData.dayThis, eleData.dayLast)
                            }
                          />
                          {eleData.dayCompared ? eleData.dayCompared : "0%"}
                        </div>
                        <div className="top_bd">
                          环比昨日
                          {getDifference(eleData.dayThis, eleData.dayLast)
                            ? getDifference(eleData.dayThis, eleData.dayLast)
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">环比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(eleData.monthThis, eleData.monthLast)
                          }
                        >
                          <IconFont
                            type={
                              "icon_zonglan_" +
                              getPlusOrMinus(
                                eleData.monthThis,
                                eleData.monthLast
                              )
                            }
                          />
                          {eleData.monthCompared ? eleData.monthCompared : "0%"}
                        </div>
                        <div className="top_bd">
                          环比上月
                          {getDifference(eleData.monthThis, eleData.monthLast)
                            ? getDifference(
                                eleData.monthThis,
                                eleData.monthLast
                              )
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">同比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(eleData.yearThis, eleData.yearLast)
                          }
                        >
                          <IconFont
                            type={
                              "icon_zonglan_" +
                              getPlusOrMinus(eleData.yearThis, eleData.yearLast)
                            }
                          />
                          {eleData.yearCompared ? eleData.yearCompared : "0%"}
                        </div>
                        <div className="top_bd">
                          同比去年
                          {getDifference(eleData.yearThis, eleData.yearLast)
                            ? getDifference(eleData.yearThis, eleData.yearLast)
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              </Card>
            </Col>

            <Col
              xs={24}
              sm={24}
              md={24}
              lg={24}
              xl={24}
              xxl={8}
              style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
            >
              <Card bordered={false} className="OvBox OvBox2">
                <div className="box_title">
                  水能耗情况&nbsp;&nbsp;|&nbsp;&nbsp;m³
                </div>
                <div className="box_body">
                  <Row style={{ marginLeft: -6, marginRight: -6, rowGap: 0 }}>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">日用量</div>
                        <div className="top_vd">
                          {waterData.dayThis ? waterData.dayThis : 0}
                        </div>
                        <div className="top_bd">
                          较上日
                          <span
                            className={getPlusOrMinus(
                              waterData.dayThis,
                              waterData.dayLast
                            )}
                          >
                            {getDifference(waterData.dayThis, waterData.dayLast)
                              ? getDifference(
                                  waterData.dayThis,
                                  waterData.dayLast
                                )
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">月用量</div>
                        <div className="top_vd">
                          {waterData.monthThis ? waterData.monthThis : 0}
                        </div>
                        <div className="top_bd">
                          较上月
                          <span
                            className={getPlusOrMinus(
                              waterData.monthThis,
                              waterData.monthLast
                            )}
                          >
                            {getDifference(
                              waterData.monthThis,
                              waterData.monthLast
                            )
                              ? getDifference(
                                  waterData.monthThis,
                                  waterData.monthLast
                                )
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">年用量</div>
                        <div className="top_vd">
                          {waterData.yearThis ? waterData.yearThis : 0}
                        </div>
                        <div className="top_bd">
                          较去年
                          <span
                            className={getPlusOrMinus(
                              waterData.yearThis,
                              waterData.yearLast
                            )}
                          >
                            {getDifference(
                              waterData.yearThis,
                              waterData.yearLast
                            )
                              ? getDifference(
                                  waterData.yearThis,
                                  waterData.yearLast
                                )
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">环比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(waterData.dayThis, waterData.dayLast)
                          }
                        >
                          <IconFont
                            type={
                              "icon_zonglan_" +
                              getPlusOrMinus(
                                waterData.dayThis,
                                waterData.dayLast
                              )
                            }
                          />
                          {waterData.dayCompared ? waterData.dayCompared : "0%"}
                        </div>
                        <div className="top_bd">
                          环比昨日
                          {getDifference(waterData.dayThis, waterData.dayLast)
                            ? getDifference(
                                waterData.dayThis,
                                waterData.dayLast
                              )
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">环比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(
                              waterData.monthThis,
                              waterData.monthLast
                            )
                          }
                        >
                          <IconFont type="icon_zonglan_up" />
                          {waterData.monthCompared
                            ? waterData.monthCompared
                            : "0%"}
                        </div>
                        <div className="top_bd">
                          环比上月
                          {getDifference(
                            waterData.monthThis,
                            waterData.monthLast
                          )
                            ? getDifference(
                                waterData.monthThis,
                                waterData.monthLast
                              )
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">同比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(
                              waterData.yearThis,
                              waterData.yearLast
                            )
                          }
                        >
                          <IconFont
                            type={
                              "icon_zonglan_" +
                              getPlusOrMinus(
                                waterData.yearThis,
                                waterData.yearLast
                              )
                            }
                          />
                          {waterData.yearCompared
                            ? waterData.yearCompared
                            : "0%"}
                        </div>
                        <div className="top_bd">
                          同比去年
                          {getDifference(waterData.yearThis, waterData.yearLast)
                            ? getDifference(
                                waterData.yearThis,
                                waterData.yearLast
                              )
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              </Card>
            </Col>
            <Col
              xs={24}
              sm={24}
              md={24}
              lg={24}
              xl={24}
              xxl={8}
              style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
            >
              <Card bordered={false} className="OvBox OvBox3">
                <div className="box_title">
                  吨标煤情况&nbsp;&nbsp;|&nbsp;&nbsp;kgce
                </div>
                <div className="box_body">
                  <Row style={{ marginLeft: -6, marginRight: -6, rowGap: 0 }}>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">日用量</div>
                        <div className="top_vd">
                          {standardData.dayThis ? standardData.dayThis : 0}
                        </div>
                        <div className="top_bd">
                          较上日
                          <span
                            className={getPlusOrMinus(
                              waterData.dayThis,
                              waterData.dayLast
                            )}
                          >
                            {getDifference(
                              standardData.dayThis,
                              standardData.dayLast
                            )
                              ? getDifference(
                                  standardData.dayThis,
                                  standardData.dayLast
                                )
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">月用量</div>
                        <div className="top_vd">
                          {standardData.monthThis ? standardData.monthThis : 0}
                        </div>
                        <div className="top_bd">
                          较上月
                          <span
                            className={getPlusOrMinus(
                              standardData.monthThis,
                              standardData.monthLast
                            )}
                          >
                            {getDifference(
                              standardData.monthThis,
                              standardData.monthLast
                            )
                              ? getDifference(
                                  standardData.monthThis,
                                  standardData.monthLast
                                )
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div className="oLi">
                        <div className="top_td">年用量</div>
                        <div className="top_vd">
                          {standardData.yearThis ? standardData.yearThis : 0}
                        </div>
                        <div className="top_bd">
                          较去年
                          <span
                            className={getPlusOrMinus(
                              standardData.yearThis,
                              standardData.yearLast
                            )}
                          >
                            {getDifference(
                              standardData.yearThis,
                              standardData.yearLast
                            )
                              ? getDifference(
                                  standardData.yearThis,
                                  standardData.yearLast
                                )
                              : "+0"}
                          </span>
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">环比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(
                              standardData.dayThis,
                              standardData.dayLast
                            )
                          }
                        >
                          <IconFont
                            type={
                              "icon_zonglan_" +
                              getPlusOrMinus(
                                standardData.dayThis,
                                standardData.dayLast
                              )
                            }
                          />
                          {standardData.dayCompared
                            ? standardData.dayCompared
                            : "0%"}
                        </div>
                        <div className="top_bd">
                          环比昨日
                          {getDifference(
                            standardData.dayThis,
                            standardData.dayLast
                          )
                            ? getDifference(
                                standardData.dayThis,
                                standardData.dayLast
                              )
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">环比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(
                              standardData.monthThis,
                              standardData.monthLast
                            )
                          }
                        >
                          <IconFont
                            type={
                              "icon_zonglan_" +
                              getPlusOrMinus(
                                standardData.monthThis,
                                standardData.monthLast
                              )
                            }
                          />
                          {standardData.monthCompared
                            ? standardData.monthCompared
                            : "0%"}
                        </div>
                        <div className="top_bd">
                          环比上月
                          {getDifference(
                            standardData.monthThis,
                            standardData.monthLast
                          )
                            ? getDifference(
                                standardData.monthThis,
                                standardData.monthLast
                              )
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                    <Col
                      xs={12}
                      sm={8}
                      md={8}
                      lg={8}
                      xl={4}
                      xxl={8}
                      style={{
                        paddingLeft: 3,
                        paddingRight: 3,
                        paddingBottom: 6,
                        rowGap: 0,
                      }}
                    >
                      <div
                        className="oLi"
                        style={{ backgroundColor: "#EEF2FE" }}
                      >
                        <div className="top_td">同比</div>
                        <div
                          className={
                            "top_vs " +
                            getPlusOrMinus(
                              standardData.yearThis,
                              standardData.yearLast
                            )
                          }
                        >
                          <IconFont
                            type={
                              "icon_zonglan_" +
                              getPlusOrMinus(
                                standardData.yearThis,
                                standardData.yearLast
                              )
                            }
                          />
                          {standardData.yearCompared
                            ? standardData.yearCompared
                            : "0%"}
                        </div>
                        <div className="top_bd">
                          同比去年
                          {getDifference(
                            standardData.yearThis,
                            standardData.yearLast
                          )
                            ? getDifference(
                                standardData.yearThis,
                                standardData.yearLast
                              )
                            : "+0"}
                        </div>
                      </div>
                    </Col>
                  </Row>
                </div>
              </Card>
            </Col>
          </Row>
        </div>
      </>
    );
  }
  componentWillMount() {}
  //函数差值
  getDifference(is, last) {
    if (!is) {
      is = 0;
    }
    if (!last) {
      last = 0;
    }
    let n: number = Number(is) - Number(last);
    return n;
  }
  //函数比较大小
  getPlusOrMinus(is, last) {
    if (!is) {
      is = 0;
    }
    if (!last) {
      last = 0;
    }
    let n: number = Number(is) - Number(last);
    //有效数字
    if (n >= 0) {
      return "up";
    } else if (n < 0) {
      return "down";
    }
  }
  shouldComponentUpdate(newProps: OverviewProps, newState: OverviewState) {
    //电能计算
    if (newProps.dataSouce !== this.props.dataSouce) {
      this.setState({
        eleData: newProps.dataSouce.eleData,
        waterData: newProps.dataSouce.waterData,
        standardData: newProps.dataSouce.standardData,
      });
    }
    return true;
  }
}

export default Overview;
